<!--
 * @Author: tian_biao
 * @Date: 2021-08-20 09:42:00
 * @LastEditTime: 2021-08-23 21:15:50
 * @Description: 运维计划列表
-->

<template>
    <article class="bg_4dbfae">
        <Theader :title="title">
            <template slot="header_arrow">
                <van-icon size="25" name="arrow-left" @click="back" />
            </template>
            <template slot="header_icon">
                <van-image class="imgSize" width="20" height="20" :src="icon.tongji" />
            </template>
        </Theader>
        <div class="main">
            <div class="tabs">
                <div class="tabItemBox">
                    <div class="tabItem" :class="{selActive:active==0}" @click="selTab(0)">
                        <div class="all">{{currentTab}}</div>
                        <van-tag class="tag" round type="danger">99+</van-tag>
                    </div>
                    <div class="tabItem" @click="selTab(1)" :class="{selActive:active==1}">
                        <div class="all">设备维护</div>
                        <van-tag class="tag" round type="danger">2</van-tag>
                    </div>
                    <div class="tabItem" @click="selTab(2)" :class="{selActive:active==2}">
                        <div class="all">定期试验轮换</div>
                        <van-tag class="tag" round type="danger">10</van-tag>
                    </div>
                </div>
                <van-icon name="arrow-up" class="mt1rem" @click="maskShow=true" />
            </div>
            <van-row class="row_search" type="flex" justify='space-around'>
                <van-col span="21">
                    <van-search style="position: unset" maxlength="20" v-model.trim="keyWord" show-action
                        @search="search" shape="round" background="#F5F6FA" placeholder="请输入设备名称">
                    </van-search>
                </van-col>
                <van-col span="3">
                    <img class="sizer" @click="show=true" src="../../images/sreachG.png">
                </van-col>
            </van-row>
            <div class="list">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getDefectDicInfo">
                    <div class="defectItem" @click="goDetail">
                        <div class="rightPart">
                            <div class="timePart">
                                <div class="fristBox">
                                    <div>
                                        <div class="defectXz textColorYb">「待安排」</div>
                                        <div class="title">花园山变电站熄灯巡视</div>
                                    </div>
                                </div>
                                <div class="box">
                                    <van-icon name="underway-o" />
                                    <div class="tourTime">巡视计划时间：</div>
                                    <div class="textShow">2021/06/13 11:30~2021/06/13 11:30</div>
                                </div>
                                <div class="schduling">安排人员</div>
                            </div>
                        </div>
                    </div>
                    <div class="defectItem" @click="goDetail">
                        <div class="rightPart">
                            <div class="timePart">
                                <div class="fristBox">
                                    <div>
                                        <div class="defectXz textColorYb">「待执行」</div>
                                        <div class="title">花园山变电站熄灯巡视</div>
                                    </div>
                                </div>
                                <div class="box">
                                    <van-icon name="underway-o" />
                                    <div class="tourTime">巡视计划时间：</div>
                                    <div class="textShow">2021/06/13 11:30~2021/06/13 11:30</div>
                                </div>
                                <div class="schduling">登记运行记录</div>
                            </div>
                        </div>
                    </div>
                    <div class="defectItem" @click="goDetail">
                        <div class="rightPart">
                            <div class="timePart">
                                <div class="fristBox">
                                    <div>
                                        <div class="defectXz textColorYb">「待执行」</div>
                                        <div class="title">花园山变电站熄灯巡视</div>
                                    </div>
                                </div>
                                <div class="box">
                                    <van-icon name="underway-o" />
                                    <div class="tourTime">巡视计划时间：</div>
                                    <div class="textShow">2021/06/13 11:30~2021/06/13 11:30</div>
                                </div>
                                <div class="schduling">登记运行记录</div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
        <div class="mask main" v-show="maskShow">
            <div class="tabs">
                <div class="tabItemBox1">
                    <div class="tabItemBox">
                        <div class="tabItem" :class="{selActive:active==0}" @click="selTab(0)">
                            <div class="all">全部</div>
                            <van-tag class="tag" round type="danger">99+</van-tag>
                        </div>
                        <div class="tabItem" @click="selTab(1)" :class="{selActive:active==1}">
                            <div class="all">设备维护</div>
                            <van-tag class="tag" round type="danger">2</van-tag>
                        </div>
                        <div class="tabItem" @click="selTab(2)" :class="{selActive:active==2}">
                            <div class="all">定期试验轮换</div>
                            <van-tag class="tag" round type="danger">10</van-tag>
                        </div>
                    </div>
                    <div class="tabItemBox">
                        <div class="tabItem" :class="{selActive:active==3}" @click="selTab(3,'设备带电检测')">
                            <div class="all">设备带电检测</div>
                            <van-tag class="tag" round type="danger">99+</van-tag>
                        </div>
                        <div class="tabItem" @click="selTab(4,'设备带电检测')" :class="{selActive:active==4}">
                            <div class="all">道闸操作</div>
                            <van-tag class="tag" round type="danger">2</van-tag>
                        </div>
                        <div class="tabItem" @click="selTab(5,'工作许可')" :class="{selActive:active==5}">
                            <div class="all">工作许可</div>
                            <van-tag class="tag" round type="danger">10</van-tag>
                        </div>
                    </div>
                </div>
                <van-icon name="arrow-down" class="mt1rem" @click="maskShow=false" />
            </div>
        </div>
    </article>
</template>
<script>
    import Theader from "../component/header"
    export default {
        name: "operPlanList",
        components: {
            Theader
        },
        data() {
            return {
                active: 0,
                title: "运维计划",
                currentTab: "全部",// 当前选中tab
                maskShow: false,
                lineWidth: "6rem",// 下划线宽度
                loading: false,//加载状态
                finished: false,//加载完成
                keyWord: null,// 关键字查询
                icon: {
                    tongji: require("../../../../assets/tour/tongji.png"),
                }
            }
        },
        computed: {

        },
        methods: {
            back() {
                this.$router.go(-1)
            },
            selTab(num, currentTab) {
                this.active = num
                if (num >= 3) {
                    this.currentTab = currentTab
                } else {
                    this.currentTab = "全部"
                }

                this.activeCopy = num
                this.maskShow = false
            },
            /**
            * @description: 列表
            * @param {*}
            * @return {*}
            */
            getDefectDicInfo() {
                var self = this
                // 非法字符
                var regExp = /[@#\$%\^&\*\!\！\(\)\（\）\……\￥\&\_\-\——\=\+]+/g
                if (regExp.test(this.keyWord)) {
                    this.$toast("查询内容含非法字符")
                    return
                }
                // var params = {
                //     deviceType: this.deviceTypeId,// 设备类型id
                //     roleCode: "",
                //     userId: this.userId,// 用户id
                //     keyWord: this.keyWord,// 关键字
                //     pageSize: this.pageSize,// 页面条数
                //     pageNum: this.pageNum,// 页码
                // }
                var params = {
                    "pageNum": 1,
                    "pageSize": 10,
                    "deviceType": "0322", "roleCode": "", "userId": "915142429"
                }
                // this.$toast.loading({
                //     duration: 0,//展示时长 0不会消失
                //     message: "正在获取...",
                //     forbidClick: true,//是否禁止背景点击
                //     overlay: true//是否显示背景遮罩层
                // })
            },
            search() {
                this.defectLibList = []
            },
            goDetail() {
                this.$router.push({
                    name: "operPlanDetail"
                })
            }
        },
        watch: {
            maskShow(val) {
                if (val) {
                    this.active = this.activeCopy
                } else {
                    this.active = 0
                }
            }
        },
        mounted() {

        }
    }
</script>
<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bg_4dbfae {
        background: #F5F6F7 !important;
    }

    .tabs {
        width: 100%;
        /* height: 3rem; */
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .mask {
        width: 100%;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .main {
        height: calc(100% - 7rem);
        padding-bottom: 3rem;
        margin-top: 2.8rem;
    }

    .mt1rem {
        margin-top: 1rem;
    }

    .tabItem {
        /* background-color: pink; */
        flex: 0.23;
        position: relative;
        border-bottom: 2px solid #fff;
    }

    .all {
        text-align: center;
        line-height: 3rem;
        min-width: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tabItemBox {
        flex: 0.95;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /* background-color: skyblue;    */
    }

    .tabItemBox1 {
        flex: 0.95;
    }

    .maskTab {
        width: 100%;
    }

    .tag {
        position: absolute;
        top: 11%;
        right: -15%;
    }

    .selActive {
        border-bottom: 2px solid #0EB295;
        color: #0EB295;
    }

    .list {
        width: 95%;
        max-height: 92%;
        margin: 0 auto;
        overflow-y: auto;
        margin-top: 0.7rem;
    }

    .defectItem {
        margin-bottom: 10px;
        padding: 15px;
        color: #8f8f94;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        /* margin-top: 1rem; */
        border-radius: 4px;
        background: #FFFFFF;
        box-shadow: 0px 0px 1px 0px #ccc;
        position: relative;
        overflow: hidden;

    }

    .defectItem .rightPart {
        width: 100%;
    }

    .fristBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
    }

    .fristBox>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .textColorYb {
        color: #0EB295;
    }

    .defectXz {
        /* color: #0EB295; */
        font-family: Source Han Sans CN;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0px;
        text-align: right;
        margin-left: -0.5rem;
        width: 75px;
    }

    .title {
        font-style: 2rem;
        font-weight: 600;
        color: black;
        width: 8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .box {
        display: flex;
        margin-top: 0.5rem;
        align-items: center;
        color: #333;
    }

    .textShow {
        width: 35%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tourTime {
        min-width: 110px;
    }

    .schduling {
        width: 100%;
        height: 4rem;
        margin: 0 auto;
        margin-top: 1rem;
        border-radius: 12px;
        background: url("../../images/btnBg.png");
        background-size: 100% 100%;
        text-align: center;
        line-height: 4rem;
        font-size: 1.2rem;
        color: #fff;
    }

    .sizer {
        width: 1.5rem;
        height: 1.5rem;
        margin-left: 1rem;
        margin-top: 0.5rem;
    }

    .van-search__action {
        display: none;
    }

    .van-search__content--round {
        background: white !important;
        color: #E6E6E6 !important;
    }

    .van-search {
        /* margin-top: 3rem; */
        width: 100%;
        border-radius: 4px !important;
        background-color: #fff !important;
        border: 1px solid #e5e5e5 !important;
        height: 2.5rem !important;
    }

    .row_search {
        width: 95%;
        margin: 0 auto;
        margin-top: 0.5rem;
    }
</style>